@import "variables";

slide-card {
  .card-container {
    position: relative;
    z-index: 11;
    overflow: hidden;
    transition: height 0.5s;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
    }
    .card-switch {
      position: absolute;
      z-index: 12;
      bottom: 0;
      right: 0;
      left: 0;
      width: pxTorem(110);
      height: pxTorem(30);
      margin: auto;
      background-color: rgba(255, 255, 255, .3);
      border-top-left-radius: pxTorem(6);
      border-top-right-radius: pxTorem(6);
      //transition: all 5s;
      & seed-icon {
        font-size: pxTorem(22);
        line-height: pxTorem(30);
      }
      &.open {
        & seed-icon {
          transform: rotate(180deg);
        }
      }
    }
  }
  .big-card {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    padding: pxTorem(30) 9% pxTorem(60) 9%;
    backface-visibility: hidden;
    transition: transform .5s;
    //transform: translateY(-600px);
    //transform: translateZ(0);
    //backface-visibility: hidden;
    //perspective: 1000;
    //transform: translate3d(0, 0, 0);
    .big-card-content {
      position: relative;
      overflow: hidden;
      transform: rotate(0deg);
      border-radius: pxTorem(30) !important;
      color: #fff;
    }
    .card-top {
      max-width: 85%;
    }
    .status-mark {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      position: absolute;
      top: pxTorem(-100);
      right: pxTorem(-100);
      width: pxTorem(180);
      height: pxTorem(180);
      padding-bottom: pxTorem(4);
      text-align: center;
      color: #fff;
      //background-color: #70d77b;
      transform: rotate(45deg);
    }
    .card-top {
      padding-top: pxTorem(30);
      padding-right: pxTorem(17);
      padding-left: pxTorem(30);
      font-size: standard($f, f6);
    }
    .card-content {
      margin-top: pxTorem(80);
      margin-bottom: pxTorem(40);
      padding-right: pxTorem(17);
      padding-left: pxTorem(30);

      .left {
        align-items: baseline;
        h2 {
          margin-bottom: pxTorem(16);
          font-size: standard($f, f1);
        }
        span {
          font-size: 30px;
        }
      }
      .right {
        p {
          font-size: standard($f, f6);
        }
      }
    }
    .card-bottom {
      height: pxTorem(82);
      border-top: 1px solid rgba(255, 255, 255, .3);
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        text-align: center;
        &:first-of-type {
          border-right: 1px solid rgba(255, 255, 255, .3);
        }
        &:before {
          content: '';
          display: inline-block;
          margin-right: pxTorem(14);
        }
      }

      .order-link {
        &:before {
          @include icon(30, 30, '#{$icons-path}/image_order.png')
        }
      }
      .goods-link {
        &:before {
          @include icon(30, 30, '#{$icons-path}/image_goods.png')
        }
      }
    }
  }
  .small-card {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: pxTorem(50) 0;
    color: #fff;
    backface-visibility: hidden;
    transition: transform 0.5s;

    .left {
      display: flex;
      align-items: center;
      padding-left: pxTorem(60);
      seed-icon {
        font-size: pxTorem(90);
        //line-height: pxTorem(65);
        margin-right: pxTorem(20);
        color: #d2d2d2;
      }
      img {
        width: pxTorem(80);
        height: pxTorem(66);
        margin-right: pxTorem(20);
      }
      em {
        display: block;
        margin-bottom: pxTorem(6);
        font-size: standard($f, f2);
      }
      span {
        display: flex;
        align-items: center;
        //margin-left: pxTorem(20);
        font-size: standard($f, f6);
        &:after {
          content: '';
          display: inline-block;
          //position: absolute;
          //top: 0;
          //bottom: 0;
          //left: 0;
          //right: 0;
          //margin: auto;
          width: 7px;
          height: 7px;
          border-top: 1px solid;
          border-left: 1px solid;
          border-color: #fff;
          transform: rotate(135deg);
        }
      }
    }

    .right {
      position: relative;
      width: pxTorem(122);
      height: pxTorem(40);
      font-size: standard($f, f6);
      span {
        margin-left: pxTorem(20);
      }
      p {
        position: absolute;
        z-index: -1;
        right: pxTorem(-10);
        width: 100%;
        height: 100%;
        //background-color: color(h5, c24);
        transform: skewX(-10deg);
        margin-left: pxTorem(-80);
      }
    }
  }
  /* 动画 */

  .big-card-in {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }

  .big-card-out {
    transform: translateY(-250px) scale(0.5);
    opacity: 0;
  }

  .small-card-out {
    opacity: 0;
    transform: translateY(180px) scale(0.5);
  }

  .small-card-in {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }

}
